<html>
  <head>
  </head>

  <body>
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>

  <style>

    /* 
    首先添加一个父元素 宽度100%，高度由子元素撑起来
    由于子元素横向排列，并且子元素居中排列，所有采用flex布局，
    主轴默认横向排列，主轴上对齐方式为 center

    子元素设置宽度，margin，padding-top,利用了padding-top属性使元素的内容高度等于宽度
    子元素设置渐变，和动画。
    child 类定义了一个animation属性，该属性引用名为fadeIn的@keyframes动画。
    动画从opacity: 0（完全透明）变化到opacity: 1（完全不透明），过程持续0.5秒钟 ，
    分别是 1s ，2s ，3s 后执行

     */

    
    .parent{
      width: 100%; /* 父元素宽度为100% */
      padding: 20px 0; 
      display: flex;/* 使用flex布局 */
      justify-content: center;/* 子元素水平居中 */
    }
    .child{
      width: 25%;/* 子元素宽度为父元素宽度的25% */
      margin:0 2.5%;/* 子元素之间的外边距为父元素宽度的5%，左右各2.5% */
      
      padding-top: 25%;
      background:linear-gradient(to right, red, orange);;

    }
  
    .child:first-child{

      /* 从左到右分别为: 动画名称 , 持续时间,动画次数,动画延迟,动画曲线(按何种方式移动,linear为平滑过渡)

      注意,前两位必须注意顺序,后面任意顺序即可(以上属性未写完全,其他属性不常用) */

      animation: fadeIn 0.5s 1 1s linear;
      -moz-animation: fadeIn 0.5s 1 1s linear;
      -webkit-animation: fadeIn 0.5s 1 1s linear;
      -o-animation: fadeIn 0.5s 1 1s linear;

    }

    .child:nth-child(2){

      animation: fadeIn 0.5s 1 2s linear;
      -moz-animation: fadeIn 0.5s 1 2s linear;
      -webkit-animation: fadeIn 0.5s 1 2s linear;
      -o-animation: fadeIn 0.5s 1 2s linear;

      }

    .child:last-child{

      animation: fadeIn 0.5s 1 3s linear;
      -moz-animation: fadeIn 0.5s 1 3s linear;
      -webkit-animation: fadeIn 0.5s 1 3s linear;
      -o-animation: fadeIn 0.5s 1 3s linear;

    }

    @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
    
    }

    @-webkit-keyframes fadeIn {

      0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }

    }

  </style>
</html>